<template>
  <div class="course_wrap">
    <div class="courseInfo">
        <courseInfo @send-flag="getFlag" />
        <div v-if="coverFlag" class="cover"></div> 
    </div> 
     <div class="course_dir">
      <table-title title="课程内容"></table-title>
      <div style="display:flex; justify-content: space-between;">
          <div style="width: 45%;">
            <dir-com></dir-com>
          </div>
          <div  style="width: 45%;">
             <video-com></video-com>
            </div>
        </div>
       <div class="cover" v-if="!coverFlag&&!status" ></div> 
    </div>
     <div class="course_editor">
           <course-editor></course-editor>
         <div class="cover" v-if="!coverFlag&&!status" ></div> 
    </div>
  </div>
</template>

<script setup lang="ts">
  import courseInfo from './child/courseInfo.vue'
  import dirCom from './child/dirCom.vue'
  import videoCom from './child/videoCom.vue'
  import courseEditor from './child/couresEditor.vue'
  import { ref } from 'vue';
  let coverFlag=ref(false)
  let status=ref('')
  // 获取 子组件传来的状态
    let getFlag=(flag:boolean,sta:string)=>{
        coverFlag.value=flag;
        status.value=sta
    }

</script>
<style lang="less" scoped>
  .course_wrap{
    padding:40px;
    box-sizing:border-box;
      .courseInfo{
        height:400px;
        // background:skyblue;
        position: relative;
      }
      .course_dir{
            height:400px;
            // background:red;  
            margin-top:20px;
           position: relative;   
      }
      .course_editor{
             height:400px;
            background:blue;  
            margin-top:20px;   
              position: relative;
      }
  }
  .cover{
    width: 100%;
    height: 400px;
    background: rgba(255,0,0,0.5);
    position: absolute;
    left:0;
    top:0;
    z-index:999;
  }
</style>
